// bubbleTooltip.js (自定义指令)
export default {
  bind(el, binding) {
    let tooltip;

    const showTooltip = (event) => {
      tooltip = document.createElement('div');
      tooltip.style.position = 'absolute';
      tooltip.style.background = '#333';
      tooltip.style.color = '#fff';
      tooltip.style.padding = '5px 10px';
      tooltip.style.borderRadius = '5px';
      tooltip.style.whiteSpace = 'nowrap';
      tooltip.style.pointerEvents = 'none';
      tooltip.style.zIndex = '1000';
      tooltip.style.fontSize = '12px';

      tooltip.innerHTML = binding.value; // 将传入的HTML内容插入气泡

      document.body.appendChild(tooltip);

      const updatePosition = (e) => {
        tooltip.style.top = `${e.pageY + 10}px`;
        tooltip.style.left = `${e.pageX + 10}px`;
      };

      updatePosition(event); // 初始位置
      document.addEventListener('mousemove', updatePosition);

      el._tooltipUpdatePosition = updatePosition; // 保存更新位置的函数
    };

    const hideTooltip = () => {
      if (tooltip) {
        document.body.removeChild(tooltip);
        tooltip = null;
      }

      document.removeEventListener('mousemove', el._tooltipUpdatePosition);
    };

    el.addEventListener('mouseenter', showTooltip);
    el.addEventListener('mouseleave', hideTooltip);

    el._tooltipHide = hideTooltip; // 保存隐藏函数
  },
  unbind(el) {
    el.removeEventListener('mouseenter', el._tooltipHide);
    el.removeEventListener('mouseleave', el._tooltipHide);
  }
};
